<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Macy.js - A lightweight, dependency free, JavaScript masonry layout library</title>

    <link rel="stylesheet" href="assets/css/macy.css">
    <link rel="stylesheet" href="assets/css/icons.css">
    <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="assets/img/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="assets/img/favicons/favicon-194x194.png" sizes="194x194">
    <link rel="icon" type="image/png" href="assets/img/favicons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="assets/img/favicons/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="assets/img/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="assets/img/favicons/manifest.json">
    <link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-144x144.png">
    <meta name="msapplication-config" content="assets/img/favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <header class="hero">
        <div class="container">
            <img class="logo" src="assets/img/macy-logo.svg" style="width: 146px" alt="">
            <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped) masonry layout library. Designed for hassle free configuration and use for your content.</h1>
            <a href="https://github.com/bigbitecreative/macy.js/" class="btn has-icon icon-github">Download and docs on GitHub</a>
        </div>
    </header>

    <main class="main" role="main">
        <section class="section">
            <div class="container">
                <ul class="feature-list">
                    <li>User definable breakpoints</li><!--
                    --><li>Works with CSS transitions</li><!--
                    --><li>Simple event API</li><!--
                    --><li>No jQuery or other dependencies</li>
                </ul>
            </div>
        </section>
        <section class="section">
            <div class="container">
                <div id="macy-container">
                    <div class="demo" macy-complete="1"><img src="http://unsplash.it/557/387/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/602/660/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/660/646/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/741/375/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/813/455/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/470/896/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/664/653/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/708/313/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/738/578/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/458/482/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/439/856/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/549/315/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/877/693/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/542/805/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/683/445/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/616/340/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/533/317/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/700/894/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/663/541/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/368/575/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/696/538/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/571/460/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/892/379/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/473/729/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/657/632/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/311/796/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/588/561/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/812/564/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/353/454/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/468/737/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/600/784/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/777/833/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/801/576/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/826/564/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/390/240/" alt="" class="demo-image"></div>
                    <div class="demo"><img src="http://placerabbit.com/390/130/" alt="" class="demo-image"></div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            Made by <a href="//bigbitecreative.com">Big Bite Creative</a>
        </div>
    </footer>

    <script src="../dist/macy.js"></script>
    <script>
        var masonry = new Macy({
            container: '#macy-container',
            trueOrder: false,
            waitForImages: false,
            useOwnImageLoader: false,
            debug: true,
            mobileFirst: true,
            columns: 1,
            margin: {
                y: 16,
                x: '2%',
            },
            breakAt: {
                1200: 6,
                940: 5,
                520: 3,
                400: 2
            },
        });
    </script>
</body>
</html>
